<template>
<div id="home">


  <div id="daohang">
    <el-image
        style="width: 100px; height: 100px;margin-top: 50px"
        :src="this.user.pic"
    ></el-image>
    <h2 style="color: azure">欢迎您 {{user.username}}</h2>

    <el-col :span="12" style="width: 100%;height: 500px;">
      <el-menu
          default-active="1"
          class="el-menu-vertical-demo"
          background-color="#2c3e50"
          text-color="#fff"
          active-text-color="#ffd04b"
          style="border-right: #2c3e50">
        <el-menu-item index="1" @click="toCar()" style="width: 100%;float:left;">
          <i class="el-icon-menu" ></i>
          <span slot="title">车辆信息</span>
        </el-menu-item>
        <el-menu-item index="2" @click="toUser()" style="width: 100%;float:left;">
          <i class="el-icon-menu"></i>
          <span slot="title">个人信息</span>
        </el-menu-item>
        <el-menu-item index="3" style="width: 100%;float:left;">
          <i class="el-icon-menu"></i>
          <span slot="title">还款信息</span>
        </el-menu-item>
        <el-menu-item index="4" @click="toShen()" v-show="this.user.roleCode==4 || this.user.roleCode==5 || this.user.roleCode==6" style="width: 100%;float:left;">
          <i class="el-icon-menu"></i>
          <span slot="title">审核模块</span>
        </el-menu-item>
        <el-menu-item index="5" style="width: 100%;float:left;">
          <i class="el-icon-setting"></i>
          <span slot="title">系统设置</span>
        </el-menu-item>
      </el-menu>
    </el-col>
  </div>
  <div id="addP">
    <h3>车辆信息</h3>
    <el-descriptions title="" style="padding-left: 120px">
      <el-descriptions-item label="车辆名称">{{loanperson.carName}}</el-descriptions-item>
      <el-descriptions-item label="车辆品牌">{{loanperson.carBrand}}</el-descriptions-item>
      <el-descriptions-item label="所属类型">{{loanperson.carType}}</el-descriptions-item>
      <el-descriptions-item label="车辆图片">
        <img :src="loanperson.img" width="100px" height="100px">
      </el-descriptions-item>
      <el-descriptions-item label="车辆价格">{{loanperson.borrowingBalance}}</el-descriptions-item>
    </el-descriptions>
    <h3>白条种类</h3>
    <template>
      <div style="width: 33%;height: 100px;float: left">
        <p style="font-size: 14px"><b>还款方式</b></p>
        <el-radio-group v-model="loanperson.repayWay">
          <el-radio :label=1>等额本金</el-radio>
          <el-radio :label=2>等额本息</el-radio>
        </el-radio-group>
      </div>

      <div>
        <div style="width: 33%;height: 100px;float: left">
          <p style="font-size: 14px"><b>首付比例</b></p>
          <el-radio-group v-model="loanperson.downPayment" @change="updateDownMoney">
            <el-radio :label="0">0%</el-radio>
            <el-radio :label="10">10%</el-radio>
            <el-radio :label="20">20%</el-radio>
            <el-radio :label="30">30%</el-radio>
          </el-radio-group>
        </div>

        <div style="width: 33%;height: 100px;float: left">
          <p style="font-size: 14px"><b>首付金额</b></p>
          <el-input v-model="loanperson.downMoney" style="width: 200px;" size="mini" :disabled="true"></el-input>
        </div>
      </div>



      <div style="width: 33%;height: 100px;float: left">
        <p style="font-size: 14px"><b>还款期数</b></p>
        <el-select v-model="loanperson.type" clearable placeholder="请选择"  size="mini" >
          <el-option label="12个月" :value=12 size="mini" @click.native="calculateMoney()"></el-option>
          <el-option label="24个月" :value=24 size="mini" @click.native="calculateMoney()"></el-option>
          <el-option label="36个月" :value=36 size="mini" @click.native="calculateMoney()"></el-option>
        </el-select>
      </div>
      <div style="width: 33%;height: 100px;float: left">
        <p style="font-size: 14px"><b>利率</b></p>
        <el-input type="number" v-model="loanperson.interestRates" style="width: 200px;"  size="mini"   :disabled="true" placeholder="%"></el-input>
      </div>
      <div style="width: 33%;height: 100px;float: left">
        <p style="font-size: 14px"><b>手续费</b></p>
        <el-input v-model="loanperson.serviceCharge" style="width: 200px;"  size="mini" :disabled="true"></el-input>
      </div>
      <div style="width: 33%;height: 100px;float: left">
        <p style="font-size: 14px"><b>逾期利率</b></p>
        <el-input v-model="loanperson.overdueInterestRate" style="width: 200px;"  size="mini" :disabled="true" placeholder="%"></el-input>
      </div>

      <div style="width: 33%;height: 100px;float: left">
        <p style="font-size: 14px"><b>每月应还金额</b></p>
        <el-input v-model="loanperson.monthMoney" style="width: 200px;"  size="mini" :disabled="true" ></el-input>
      </div>

      <div style="width: 33%;height: 100px;float: left">
        <p style="font-size: 14px"><b>预计总还款金额</b></p>
        <el-input v-model="loanperson.repaymentPrice" style="width: 200px;"  size="mini" :disabled="true" ></el-input>
      </div>

      <el-popover
          placement="right"
          width="400"
          trigger="click">
        <el-table :data="BillList" height="250px">
          <el-table-column property="times" label="每月应还日期"></el-table-column>
          <el-table-column property="price" label="每月应还金额"></el-table-column>
        </el-table>
        <el-button slot="reference" @click="getBill()" type="primary">生成预还款账单</el-button>
      </el-popover>
      <br>


      <el-button type="primary" style="width: 100px;margin-top: 50px;margin-right: 30px" @click="toaddRepayment()">申请</el-button>
      <el-button type="primary" style="width: 100px;margin-top: 50px" @click="goBack()">取消</el-button>


  </template>
  </div>

</div>
</template>

<script>
export default {
  data(){
    return{
      billCli:false,
      cars:{},
      user:{},
      BillList:[],
      loanperson:{
        carName:"",
        carBrand:"",
        carType:"",
        settlementCharge:3000,
        borrowingBalance:null,
        img:"",
        serviceCharge:0.03,
        interestRates:null,
        repayWay:1  ,
        overdueInterestRate:0.05,
        repaymentPrice:null,
        downMoney:0.00,
        downPayment:0
      }
    }
  },
  methods:{
    getBill(){
      if (this.billCli){
        this.axios.get(`/lendmoney/api/lendmoney/getBill?type=${this.loanperson.type}&price=${this.loanperson.monthMoney}`).then(res=>{
          this.BillList = res.data.data;
          this.billCli=false;
        })
      }else {
        this.$message.error("请先选择还款期数");
      }

    },
    goBack(){
      this.$router.back();
    },
    //进入个人信息页面
    toUser(){
      this.$router.push("/personaldetails")
    },
    //进入还款页面
    toRepayment(){
      this.$router.push("/repay")
    },
    //进入审核页面
    toShen(){
      this.$router.push("/check")
    },
    //进入车辆信息页面
    toCar(){
      this.$router.push('/loanshome')
    },
    calculateMoney(){
      this.billCli = true;
      if (this.loanperson.type==12) {
        //如果为12个月利率为4.75
        this.loanperson.interestRates=4.75;
      }
      if (this.loanperson.type==24){
        //如果为24个月利率为4.5
        this.loanperson.interestRates=4.5;
      }
      if (this.loanperson.type==36){
        //如果为36个月利率为4.35
        this.loanperson.interestRates=4.35;
      }
            //期数         利率          原价
      const { type, interestRates, borrowingBalance } = this.loanperson;

      // 转换为小数形式的年利率和月利率
      //      年利率
      const annualInterestRate = interestRates / 100;
      //      月利率
      const monthlyInterestRate = annualInterestRate / 12;

      // 使用等额本息还款法计算每月还款额
      let x = Math.pow(1 + monthlyInterestRate, type);
      let monthlyPayment = ((borrowingBalance-this.loanperson.downMoney) * monthlyInterestRate * x) / (x - 1);
      this.loanperson.monthMoney = monthlyPayment.toFixed(2); // 保留两位小数

      // 计算总还款金额（本金+利息）
      this.loanperson.repaymentPrice = ((monthlyPayment * type)+3000).toFixed(2);
      // //小数之后的利率
      // let lilv = (this.loanperson.interestRates/100)+0.03
      // // 不添加利率每月应还
      // let nowMoney = this.loanperson.borrowingBalance / methodType;
      // nowMoney=nowMoney + (nowMoney*lilv);
      // this.loanperson.monthMoney = nowMoney.toFixed(2)
      // // 添加利率每月应还
      // this.loanperson.repaymentPrice= (this.loanperson.monthMoney*methodType).toFixed(2);
    },
    updateDownMoney(){
      if (this.loanperson.borrowingBalance && this.loanperson.downPayment) {
        // 根据首付比例和贷款总额计算首付金额
        this.loanperson.downMoney = parseInt((this.loanperson.borrowingBalance * this.loanperson.downPayment) / 100).toFixed(2);

          this.calculateMoney();

      } else {
        this.loanperson.downMoney = 0.00;
      }

    },
    toaddRepayment(){
      if (this.loanperson.type==null){
        this.$message.error("请选择还款期数");
      }else{
        this.axios.put(`lendmoney/api/lendmoney/addLoanper`,this.loanperson).then(res=>{
          if (res.data.code==200){
            this.$message.success("添加成功")
            this.$router.push("/repay")
          }else {
            this.$message.error(res.data.msg)
          }
        })
      }
    }
  },
  created() {
// 获取数据
    const data = JSON.parse(localStorage.getItem('user'));
    //赋值然后显示登陆人
    this.user = data
    this.loanperson.userCode=data.code
    this.loanperson.username=data.username
    let cars = JSON.parse(localStorage.getItem("cars"));
    this.loanperson.carName = cars.name;
    this.loanperson.carBrand = cars.bname;
    this.loanperson.carType = cars.tname;
    this.loanperson.borrowingBalance = cars.price;
    this.loanperson.img = cars.pic;
  }
}
</script>

<style>

#home{
  width: 100%;
  height: 815px;
  background-color: rgba(152, 134, 134, 0.18);
  box-sizing: border-box;
}



#daohang{
  width: 18%;
  height: 97%;
  background-color: #2c3e50;
  margin-left: 12px;
  margin-top: 10px;
  float: left;
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
}
#addP{
  width: 79%;
  height:  97%;
  margin-top: 10px;
  margin-right: 12px;
  float: right;
  background-color: rgb(255, 255, 255);
  box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, 0.2);
  padding: 15px;
  box-sizing: border-box;
}

</style>
